<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.master" CodeFile="~/ClientAPI/CallbackMethods.aspx.vb" Inherits="CallbackMethods"%>
<%@ Register Src="CallBackMethodsUC.ascx" TagName="CallBackMethodsUC" TagPrefix="DNN" %>
<%@ Register Src="CallBackMethodsUC2.ascx" TagName="CallBackMethodsUC2" TagPrefix="DNN" %>
<asp:content id="header" contentplaceholderid="HeaderPlaceHolder" runat="Server">
    <link href="../css/tabstrip.css" type="text/css" rel="stylesheet" />
    <link href="CallbackMethods.aspx.css" type="text/css" rel="stylesheet" />
    <script language="javascript">
    <!--   
    function doAdd()
    {
        dnn.xmlhttp.callControlMethod('MyCompany.MyClass', 'Add', {x:10, y:21}, success, fail);
    }
    
    function success(payload, ctx, req)
    {
        alert('success ' + payload);
    }
    
    function fail(payload, ctx, req)
    {
        alert('error: ' + payload);
    }
    
    //passes simple values to ControlMethod and receives complex object
    function doGetCustomers()
    {
        dnn.xmlhttp.callControlMethod('MyCompany.MyClass', 'GetCustomers', {PageSize: 10}, custListSuccess, fail);    
    }

    //passes complex object to ControlMethod and receives complex object
    function doGetRank()
    {
        dnn.xmlhttp.callControlMethod('MyCompany.MyClass', 'GetRank', {Customer: new Customer(100, 'Bill', 'Smith')}, custSuccess, fail);
    }

    //passes even more complex object to ControlMethod and receives complex object
    function doGetRanks()
    {
        var customers = [];
        customers.push(new Customer(100, 'Bill', 'Smith'));
        customers.push(new Customer(101, 'Joe', 'Adams'));
        customers.push(new Customer(102, 'Sue', 'Jones'));
        dnn.xmlhttp.callControlMethod('MyCompany.MyClass', 'GetRanks', {Customers: customers}, custListSuccess, fail);    
    }

    function custSuccess(payload, ctx, req)
    {
        var s = '';
        var cust = payload;
        s += String.format('ID: {0}, FirstName: {1}, LastName: {2}, ' +
                'Rank: {3}<br/>', cust.ID, cust.FirstName, cust.LastName, cust.Rank);
        $get('divCustomers').innerHTML = s;
    }
    
    function custListSuccess(customers, ctx, req)
    {
        var s = '';
        var cust;
        for (var i=0; i<customers.length; i++)
        {
            cust = customers[i];
            s += String.format('ID: {0}, FirstName: {1}, LastName: {2}, ' +
                'Rank: {3}<br/>', cust.ID, cust.FirstName, cust.LastName, cust.Rank);
        }
        $get('divCustomers').innerHTML = s;
    }

    function Customer(ID, FirstName, LastName)
    {
        this.ID = ID;
        this.FirstName = FirstName;
        this.LastName = LastName;
    }
    
    //-->
    </script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<br />
        <dnn:DNNTabStrip ID="tsControls" runat="server" TabStripScriptPath="../js/" TabRenderMode="All" TabAlignment="left" 
            DefaultContainerCssClass="tabcontainer" DefaultLabel-CssClass="tablabel" 
            DefaultLabel-CssClassHover="tablabel tablabelhover" DefaultLabel-CssClassSelected="tablabel tablabelselected">
            <dnn:DNNTab Label-Text="Basic" ID="tabBasic">
			    <input type="button" name="btn" value="Add" onclick="doAdd()" style="width: 150px;"><br />
		        <p class="sampledescription">
			        This scenario is the easiest to implement and could be handled with the MS AJAX PageMethods instead.
			        The server-side code used to register a control (our page) as being capable of handling ControlMethods
			        is done with the following attribute.
		        </p>				
<pre class="samplecode">
&lt;ControlMethodClass("MyCompany.MyClass")&gt; _
Partial Class CallbackMethods</pre>
                <p class="sampledescription">
                Notice, the parameter passed to the ControlMethodClass attribute.  This is the namespace
                we will use on the client to invoke this control's methods.  (If not specified, the class name
                from the control will be used.)
                The methods within the class also need to be decorated with an attribute.
                </p>
<pre class="samplecode">
&lt;ControlMethod()&gt; _
Public Function Add(ByVal x As Integer, ByVal y As Integer) As Integer
    Return x + y
End Function
</pre>
                <p class="sampledescription">
                Finally, the page must register itself as a callback handler, and also register the 
                that it contains ControlMethods.
                </p>
<pre class="samplecode">
Protected Overrides Sub OnInit(ByVal e As System.EventArgs)
    DotNetNuke.UI.Utilities.ClientAPI.HandleClientAPICallbackEvent(Me)
    ClientAPI.RegisterControlMethods(Me)
End Sub</pre>                
                <p class="sampledescription">
                On the client, the method is invoked with the following code 
                </p>
<pre class="samplecode">
dnn.xmlhttp.callControlMethod('MyCompany.MyClass', 'Add', {x:10, y:21}, success, fail);</pre>                
                <p class="sampledescription">
                Notice how our named parameters can be passed via the JSON short-hand notation.  The function named success was passed to our callControlMethod invocation.  It is passed three parameters,
                the most important of which is the payload.
                </p>
<pre class="samplecode">
    function success(payload, ctx, req)
    {
        alert('success ' + payload);
    }</pre>
            </dnn:DNNTab>
            <dnn:DNNTab Label-Text="Complex Objects" ID="tabComplexObjects">
			    <input type="button" name="btn" value="GetCustomers" style="width: 150px;" onclick="doGetCustomers()"><br />
			    <input type="button" name="btn" value="GetRank" style="width: 150px;" onclick="doGetRank()"><br />
			    <input type="button" name="btn" value="GetRanks" style="width: 150px;" onclick="doGetRanks()"><br />
			    <div id="divCustomers"></div>

                <p class="sampledescription">
                Getting a complex object back to the client like a List(Of Customer) is simple.
                Define your function like this
                </p>
<pre class="samplecode">
&lt;ControlMethod()&gt; _
Public Function GetCustomers(ByVal PageSize As Integer) As List(Of Customer)</pre>                

                <p class="sampledescription">
                Calling the method is the same.  Processing the results looks like this.  (clicking the GetCustomers
                button will demonstrate this technique.)
                </p>

<pre class="samplecode">
function custListSuccess(customers, ctx, req)
{
    var s = '';
    var cust;
    for (var i=0; i&lt;customers.length; i++)
    {
        cust = customers[i];
        s += String.format('ID: {0}, FirstName: {1}, LastName: {2}, ' +
            'Rank: {3}&lt;br/&gt;', cust.ID, cust.FirstName, cust.LastName, cust.Rank);
    }
    $get('divCustomers').innerHTML = s;
}</pre>
    
                <p class="sampledescription">
                Finally, the passing of a Generic List as an argument is allowed.  (clicking the GetRanks button will demonstrate
                this code)
                </p>
<pre class="samplecode">
var customers = [];
customers.push(new Customer(100, 'Bill', 'Smith'));
customers.push(new Customer(101, 'Joe', 'Adams'));
customers.push(new Customer(102, 'Sue', 'Jones'));
dnn.xmlhttp.callControlMethod('MyCompany.MyClass', 
    'GetRanks', {Customers: customers}, custListSuccess, fail);</pre>    

            </dnn:DNNTab>
            <dnn:DNNTab Label-Text="UserControl" ID="tabUC">
		        <DNN:CallBackMethodsUC ID="uc1a" runat="server" DateTimeFormat="MM/dd/yy H:mm:ss" />
		        <DNN:CallBackMethodsUC ID="uc1b" runat="server" DateTimeFormat="MM/dd/yyyy HH:mm:ss" />
                <p class="sampledescription">
                So far, what we demonstrated can be accomplished easily with MS AJAX PageMethods.  Where
                Control Methods shine is in their ability to invoke methods defined in user controls.  This
                sample demonstrates the calling of a specific user control's instance, each with its own
                formatted date.
                
                The trick here is to allow the registration of the control methods to have a unique identifier
                to associate with.  This can be done in the RegisterControlMethods call.
                </p>
<pre class="samplecode">ClientAPI.RegisterControlMethods(Me, Me.ID)</pre>                
                <p class="sampledescription">
                Then in the call the id specified needs to be appended to the namespace
                </p>
<pre class="samplecode">dnn.xmlhttp.callControlMethod('MyCompany.MyClass2.' + <b>methodId</b>, 
    'GetDateTime', null, getTimeSuccess, getTimeFail, ctx);</pre>                                
                
            </dnn:DNNTab>
            <dnn:DNNTab Label-Text="UserControl With Object" ID="tabUCWO">
		        <DNN:CallBackMethodsUC2 ID="uc2a" runat="server" DateTimeFormat="MM/dd/yy H:mm:ss" />
		        <DNN:CallBackMethodsUC2 ID="uc2b" runat="server" DateTimeFormat="MM/dd/yyyy HH:mm:ss" />
                <p class="sampledescription">
                This last example demonstrates the encapsulating of each control inside a client-side javascript
                object, allowing for easier maintainability.
                </p>
            </dnn:DNNTab>
        </dnn:DNNTabStrip>
		

</asp:Content>

